<template>
  <div class="table-container">
    <el-table
      :data="
        tableData.filter(
          data =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
      height="auto"
      max-height="700"
      :cell-style="cellStyle"
      :row-style="rowStyle"
      :header-row-style="headerRowStyle"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column align="center" width="200">
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >Edit</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2021-09-26",
          name: "张三",
          address: "北京"
        },
        {
          date: "2021-09-26",
          name: "张三",
          address: "北京"
        },
        {
          date: "2021-09-26",
          name: "张三",
          address: "北京"
        },
        {
          date: "2021-09-26",
          name: "张三",
          address: "北京"
        }
      ],
      search: ""
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    cellStyle() {
      // console.log(row, column, rowIndex, columnIndex)
      return `background:#001134;color:#fff;border-bottom:1px solid #002c62`;
    },
    rowStyle() {
      return `background:#f40;color:#fff;`;
    },
    headerRowStyle() {
      return `background:#001E4E;`;
    },
    headerCellStyle() {
      return `background:#001E4E;color:#00baff;border-bottom:1px solid #002c62`;
    },
    handleEdit() {},
    handleDelete() {}
  },
  watch: {}
};
</script>

<style lang="scss">
// .table-container {
// }
.el-table--group::after,
.el-table--border::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: #00446d42 !important;
  z-index: 1;
}
</style>
